<template>
    <div class='xxx'>
        <el-dialog
        title="添加服务"
        :visible.sync="dialogVisible"
        top="50px"
        width="800px">
            <div class="dialog-top-box"> 
                <div class="dialog-top-seo">
                    <el-input v-model="input" size="mini" placeholder="请输入内容"></el-input>
                    <el-button type="primary" size="mini" >搜索</el-button>
                </div>
            </div>
            <div class="table-top-div">
                <div class="checkbox-div"><el-checkbox v-model="isAlltype" @canplay="allCheckbox"></el-checkbox></div>
                <div class="table-top-title">服务名称</div>
                <div class="table-top-title">分类</div>
                <div class="table-top-title">价格</div>
            </div>
            <div class="table-box" v-infinite-scroll="load">
                <div class="table-top-div" v-for="(item,index) in tableData" :key="index">
                    <div class="checkbox-div"><el-checkbox v-model="item.isItemtype" ></el-checkbox></div>
                    <div class="table-top-title">
                        <div class="type_title">
                            <img :src="item.imgs||'https://cdn.imiyun.com/static/yd/imgs/g-default.png'" alt="">
                            <span>{{ item.title }} </span>
                        </div>
                    </div>
                    <div class="table-top-title">{{item.item_no}}</div>
                    <div class="table-top-title">{{item.price}}</div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="addGiveServiceTo">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";

// import xxx from '@/components/comm/xxx.vue';
export default {
    props: [

    ],
    components: {

    },
    computed: {

    },
    data() {
        return {
            input: "",
            dialogVisible: false,
            tableData: [],
            multipleSelection: [],
            param: {
                pfrom: 0,
                pnum: 20,
            },
            isAlltype: false,
        };
    },
    created() {

    },
    mounted() {
        this.goodsListAjax()
    },
    methods: {
        load () {
            this.param.pfrom = this.param.pfrom + 10;
            this.goodsListAjax(true)
        },
        allCheckbox (val) {
            let tableData = JSON.parse(JSON.stringify(this.tableData));
            if (val) {
                tableData.forEach( item=> {
                    item.isItemtype = true;
                })
            } else {
                tableData.forEach( item=> {
                    item.isItemtype = false;
                })
            }
            this.tableData = tableData;
        },
        async goodsListAjax (type) {
            let url = config.YY_GOODSINFO_GOODS_LIST;
            let param = this.param;
            let res = await this.$api({url: url, data: param });
            if (res.data && res.status == 1) {
                if (type) {
                    let copyArr = JSON.parse(JSON.stringify(this.tableData));
                    
                    this.tableData.push(...res.data.goods_ls);
                    return
                }
                this.tableData = res.data.goods_ls;
            }
        },
        addGiveServiceTo () {
            console.log(this.tableData)
            let copyArr = JSON.parse(JSON.stringify(this.tableData));
            copyArr = copyArr.filter ( item=> {
                return item.isItemtype == true;
            })
            copyArr = copyArr.map( item=> {
                return {
                    gdid: item.id,
                    title: item.title,
                    times: 1,
                }
            });
            this.$emit("pushGiveServiceToData",copyArr);
            this.dialogVisible = false;
        },

    }
};
</script>

<style lang="scss" scoped >
div {
    box-sizing: border-box;
}
.dialog-top-box {
    width: 250px;
    .dialog-top-seo {
        display: flex;
        .el-input {
            margin-right: 10px;
        }
    }
}
.type_title {
    display: flex;
    align-items: center;
    
    img {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        margin-right: 10px;
    }
    span {
        width: calc(100% - 40px - 10px);
        display: block;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
}
.soller-box {
    height: 400px;
    overflow:auto;
}
.table-box {
    width: 100%;
    height: 500px;
    overflow: auto;
}
.table-top-div {
    width: 100%;
    display: flex;
    align-items: center;
    height: 51px;
    border-bottom: 1px solid #EBEEF5;
    .checkbox-div {
        width: 55px;
        padding: 0 10px;
    }
    .table-top-title {
        width: calc( 33% - 18px );
        padding: 0 10px;
    }
}
</style>
